<template>
  <a-modal v-model:visible="vdata.isShow" title="支付宝子商户扫码授权" @ok="handleOkFunc" @cancel="handleOkFunc">
    <div style="text-align: center">
      <p>方式1： <br>  使用商家账号登录【支付宝】APP, 扫描如下二维码, 按提示授权： </p>
      <img style="margin-bottom: 10px" :src="vdata.apiResData.authQrImgUrl">
      <hr>

      <p style="margin-top: 10px">
        <!-- 方式2： <br> <a-button v-clipboard:copy="vdata.apiResData.authUrl" v-clipboard:success="onCopySuccess" size="small" class="copy-btn">点击复制</a-button> -->
        <br> <a-button size="small" class="copy-btn" @click="onCopy">点击复制</a-button>
        或点击以下链接，按照页面提示自主授权：
      </p>
      <a target="_blank" :href="vdata.apiResData.authUrl">{{ vdata.apiResData.authUrl }}</a>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { $queryAlipayIsvsubMchAuthUrl } from '@/api/manage'
import { message } from 'ant-design-vue'
import { reactive } from 'vue'
import useClipboard from 'vue-clipboard3'

const { toClipboard } = useClipboard()
 const  props = defineProps ({
    callbackFunc: { type: Function,default:null }
  })

    const vdata =  reactive({
      isShow: false, // 是否显示弹层/抽屉
      appId: '',
      apiResData: {} as any
    })

    function  onCopy () {
      // $infoBox.message.success('复制成功')
      const Msg = vdata.apiResData.authUrl
      copy(Msg)
    }
  const copy = async (Msg) => {
      try {
      	//复制
        await toClipboard(Msg)
        console.log(Msg,123)
        //下面可以设置复制成功的提示框等操作
        message.success('复制成功')
      } catch (e) {
      	//复制失败
        console.error(e)
      }
    }

defineExpose({show})
  function  show(appId) { // 弹层打开事件
      vdata.apiResData = {}
      vdata.appId = appId
      
      $queryAlipayIsvsubMchAuthUrl(appId).then(res => {
        vdata.apiResData = res
        vdata.isShow = true
      })
    }

  function  handleOkFunc() { // 点击【确认】按钮事件
        vdata.isShow = false
        if (props.callbackFunc) {
          props.callbackFunc()
        }
    }

  function  onCopySuccess () {
      message.success('复制成功')
    }

</script>
